{% block sw_order_address_modal %}
<sw-modal
    :title="$tc('sw-order.addressSelection.modalTitleEditAddress')"
    :is-loading="isLoading"
    @modal-close="onClose"
>
    {% block sw_order_address_modal_content %}
    <sw-tabs
        class="sw-order-address-modal"
        position-identifier="sw-order-address-modal"
        default-item="edit"
        @new-item-active="onNewActiveItem"
    >
        <template #default="{ active }">
            {% block sw_order_address_modal_tabs %}
            {% block sw_order_address_modal_tab_edit_address %}
            <sw-tabs-item
                name="edit"
                :active-tab="active"
            >
                {{ $tc('sw-order.addressSelection.headlineTabEditAddress') }}
            </sw-tabs-item>
            {%  endblock %}
            {% block sw_order_address_modal_tab_select_address %}
            <sw-tabs-item
                name="addresses"
                :active-tab="active"
            >
                {{ $tc('sw-order.addressSelection.headlineTabSelectAddress') }}
            </sw-tabs-item>
            {% endblock %}
            {% endblock %}
        </template>

        <template #content="{ active }">
            {% block sw_order_address_modal_tabs_content %}
            <div v-if="active==='edit'">
                {% block sw_order_address_modal_tabs_content_edit_address %}
                <sw-customer-address-form
                    :address="address"
                    :customer="orderCustomer"
                    :countries="countries"
                />
                <sw-custom-field-set-renderer
                    :entity="address"
                    variant="tabs"
                    :sets="addressCustomFieldSets"
                />
                {% endblock %}
            </div>
            <div v-if="active==='addresses'">
                {% block sw_order_address_modal_tabs_content_select_address %}
                <mt-button
                    v-for="address in availableAddresses"
                    :key="address.id"
                    block
                    :class="addressButtonClasses(address.id)"
                    variant="secondary"
                    @click="onExistingAddressSelected(address)"
                >
                    {{ address.company }} <br>
                    {{ salutationFilter(address) }}<br>
                    {{ address.street }} <br>
                    {{ address.zipcode }} {{ address.city }}<br>
                    {{ placeholder(address.country, 'name') }}<br>
                </mt-button>
                {% endblock %}
            </div>
            {% endblock %}
        </template>
    </sw-tabs>
    {% endblock %}

    {% block sw_order_address_modal_actions %}
    <template #modal-footer>
        {% block sw_order_address_modal_action_close %}
        <mt-button
            size="small"
            variant="secondary"
            @click="onClose"
        >
            {{ $tc('global.default.cancel') }}
        </mt-button>
        {% endblock %}

        {% block sw_order_address_modal_actions_apply %}
        <mt-button
            variant="primary"
            size="small"
            @click="onSave"
        >
            {{ $tc('global.default.apply') }}
        </mt-button>
        {% endblock %}
    </template>
    {% endblock %}
</sw-modal>
{% endblock %}

